<script>
import DefaultEmptyImg from './EmptyImage'

import { ConfigConsumerProps } from '@/components/config-provider'
import { getComponentFromProp, getListeners } from '@/utils/vnode'

export default {
  name: 'VEmpty',
  inject: {
    configProvider: { default: () => ConfigConsumerProps }
  },
  props: {
    prefixCls: String,
    image: [Object, String],
    description: [Object, String],
    imageStyle: Object
  },
  render (h, contentLocale) {
    const { prefixCls: customizePrefixCls, imageStyle } = this.$props
    const prefixCls = this.configProvider.getPrefixCls('empty', customizePrefixCls)

    const image = getComponentFromProp(this, 'image') || <DefaultEmptyImg />
    const description = getComponentFromProp(this, 'description')

    const des = typeof description !== 'undefined' ? description : this.$t('emptyText')
    const alt = typeof des === 'string' ? des : 'empty'
    const cls = { [prefixCls]: true }
    let imageNode = null
    if (typeof image === 'string') {
      imageNode = <img alt={alt} src={image} />
    } else if (typeof image === 'object' && image.PRESENTED_IMAGE_SIMPLE) {
      const Image = image
      imageNode = <Image />
      cls[`${prefixCls}-normal`] = true
    } else {
      imageNode = image
    }
    return (
      <div class={cls} {...{ on: getListeners(this) }}>
        <div class={`${prefixCls}-image`} style={imageStyle}>
          {imageNode}
        </div>
        {des && <p class={`${prefixCls}-description`}>{des}</p>}
        {this.$slots.default && <div class={`${prefixCls}-footer`}>{this.$slots.default}</div>}
      </div>
    )
  }
}
</script>
